<!--
 * @Author: ZCL
 * @Date: 2020-05-18 14:17:47
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-18 14:17:47
-->
<template>
  <!-- 资产报失详情 -->
  <div class="myLostDetail">

    <!-- 轮播图组件 -->
    <Carousel :assetInfoList="assetInfoList" />

    <!-- 数据 start -->
    <div class="repairs-box">
      <p class="b-title" v-if="c_from === '我报失的资产'">报失数据</p>
      <p class="b-title" v-if="c_from === '报修记录'">报修数据</p>
      <p class="b-title" v-if="c_from === '维修记录'">维修数据</p>
      <p class="b-title" v-if="c_from === '盘点'">盘点结果</p>
      <van-form>
        <div v-if="c_from !== '盘点'">
          <van-field
            v-model="text"
            :label="c_from === '我报失的资产'?'所属部门:':c_from === '报修记录'?'所属部门:':'维修部门:'"
            :disabled="isDisabled"
            placeholder="读取资产所在部门"
          />
          <van-field
            v-model="text"
            :label="c_from === '我报失的资产'?'报失人员:':c_from === '报修记录'?'报修人员:':'维修人员:'"
            :disabled="isDisabled"
            placeholder="读取当前员工"
          />
          <van-field
            v-model="text"
            :label="c_from === '我报失的资产'?'报失时间:':c_from === '报修记录'?'报修时间:':'确认时间:'"
            :disabled="isDisabled"
            placeholder="默认当前时间"
          />
          <van-field
            v-if="c_from === '维修记录'"
            v-model="text"
            label="维修状态"
            :disabled="isDisabled"
            placeholder="维修中"
          />
          <van-field
            v-if="c_from === '维修记录'"
            v-model="text"
            label="维修话费"
            :disabled="isDisabled"
            placeholder="维修中"
          />
          <div class="pt-10"></div>
          <van-field
            v-model="text"
            type="textarea"
            placeholder="请输入备注"
            rows="5"
            autosize
            required
            :disabled="isDisabled"
            :label="c_from === '我报失的资产'?'报失原因:':c_from === '报修记录'?'报修原因:':'报修备注:'"
          />
        </div>

        <van-field
          v-if="c_from === '盘点'"
          v-model="text"
          label="盘点结果:"
          :disabled="isDisabled"
          placeholder="维修中"
        />
        <van-field
          v-if="c_from==='盘点'"
          v-model="text"
          type="textarea"
          placeholder="请输入报修备注"
          rows="5"
          autosize
          required
          :disabled="isDisabled"
          label="盘点详情:"
        />
        <div class="pt-10"></div>
        <van-field
          v-if="c_from !== '报失'"
          label="图片详情:"
          required
          class="pt-14 pb-25"
        >
          <template #input>
            <van-image
              v-for="(item,index) in images"
              :key="index"
              width="80px"
              height="80px"
              class="mr-8 mb-10"
              :src="item"
              @click="checkImg(item)"
            />
          </template>
        </van-field>
      </van-form>
    </div>
    <!-- 数据 end -->

    <div class="bgc"></div>

    <Record :isTextShow="false" />

  </div>
</template>

<script>
import Carousel from '@/components/Carousel';
import Record from '@/components/Record';
import { ImagePreview } from 'vant';

export default {
  name: 'MyLostDetail',
  components: {
    Carousel,
    Record
  },
  data () {
    return {
      assetInfoList: {}, // 资产信息

      isOpen: false,
      c_from: '', // 上个页面进入(我报失的资产、)
      text: '',
      uploader: [], // 上传图片
      isDisabled: false, // 是否可编辑状态
      images: [ // 图片详情
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    };
  },
  methods: {
    // 展开资产信息
    getOpenAsset () {
      this.isOpen = !this.isOpen;
    },
    // 查看图片详情
    checkImg (url) {
      this.imgArr = [];
      this.imgArr.push(url);
      ImagePreview(this.imgArr);
    },
    // 操作
    getOperate (operate) {
      this.$router.push({
        name: 'record',
        query: {
          operate
        }
      });
    },
    // 获取资产信息详情
    getAssetInfo () {
      let params = {
        id: this.$route.query.id
      };
      this.$api.getAssetInfo(params).then(res => {
        if (res.code === 0) {
          this.assetInfoList = res.result;
        }
      });
    }
  },
  created () {
    this.c_from = this.$route.query.c_from;
    if (this.c_from === '我报失的资产') {
      this.isDisabled = true;
    }
    this.getAssetInfo();// 获取资产信息详情
  }
};
</script>

<style lang="scss" scoped>
.myLostDetail {
  // 报修数据
  .repairs-box {
    .b-title {
      color:#1B1B1C;
      font-size: 16px;
      padding: 12px 20px 12px 15px;
      background-color: #f8f9fd;
    }
    ::v-deep.van-field__label {
      width: 78px;
    }
    .pt-10 {
      height: 10px;
      background-color: #f8f9fd;
    }
  }
  // 操作记录
  ::v-deep.record-box {
    .record {
      padding-top: 20px !important;
    }
  }
  ::v-deep.van-field__control--custom {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
